
import React, { memo, useCallback, useState, useEffect, useRef } from 'react';

import ThemeHeaderNormal from '@/components/theme-header-normal';
import RadioRankingCover from '@/components/radio-ranking-cover/index.jsx';

import { Pagination } from 'antd'

import { getRadioAction } from '../../store/actionCreators'
import sty from './sty.module.css';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

const RadioRanking = () => {
  const rankRef = useRef(null)
  const [currentPage, setCurrentPage] = useState(1);
  const { currentId, radios } = useSelector(state => ({
    radios: state.getIn(['djradio', 'radios']),
    currentId: state.getIn(['djradio', 'currentId'])
  }), shallowEqual)

  const dispatch = useDispatch();

  useEffect(() => {
    if (currentId === 0) {
      return
    }
    dispatch(getRadioAction(currentId, 0))
  }, [currentId, dispatch])

  const changeCurPage = useCallback((page) => {

    window.scrollTo({
      behavior: 'smooth',
      top: (rankRef.current.offsetTop - 50) || 0
    })
    setCurrentPage(page);
    dispatch(getRadioAction(currentId, page * 30))
  }, [dispatch, currentId, currentPage, rankRef])

  return <  >
    <ThemeHeaderNormal title='电台排行榜' />
    <div className={sty.rankingList} ref={rankRef}>
      {
        !!radios.length && radios.map(v => <RadioRankingCover key={v.id} radio={v} />)
      }
    </div>
    <Pagination
      total={1000}
      current={currentPage}
      onChange={changeCurPage}
      showSizeChanger={false}
      className={sty.container}
    />

  </>
}
export default memo(RadioRanking)